'use client'

export default function FinancialSnapshot() {
  const metrics = [
    {
      metric: 'Gross Margin (Blended)',
      value: '55–65% (EST)',
      benchmark: '50–70% HW+SaaS typical'
    },
    {
      metric: 'ASP per Lock',
      value: '$140 distribution; $205 MSP',
      benchmark: '$65–$205 industrial padlocks'
    },
    {
      metric: 'License ARPU',
      value: '$7.5/lock/mo (TNB pilot); range $3–$12',
      benchmark: '$3–$15 per endpoint SaaS'
    },
    {
      metric: 'Contracted Potential (TNB)',
      value: '$42M HW + $10.8M ARR',
      benchmark: 'N/A'
    },
    {
      metric: 'Runway Post-Raise',
      value: '12–15 months on $1M raise (EST)',
      benchmark: '12–18 months early-stage'
    }
  ]

  const founders = [
    {
      name: 'Michael Wang',
      title: 'CEO',
      edge: 'Technical founder, prior startups; bridges HW + SaaS; deep involvement in product.'
    },
    {
      name: 'Jessie Ju',
      title: 'CFO',
      edge: 'Translational finance; scales ops/FP&A for growth; investor-facing rigor.'
    }
  ]

  return (
    <div className="w-full max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 text-gray-300">
      {/* Financial Snapshot */}
      <div className="strengths-weaknesses-card p-[16px]">
        <h2 className="text-[#9fb7ff] text-sm font-semibold uppercase tracking-wider mb-4">
          Financial & Economic Snapshot
        </h2>

        {/* 表格 */}
        <div className="overflow-x-auto">
          <table className="w-full border-collapse text-left text-sm">
            <thead>
              <tr className="text-[#8ea2c9] border-b border-[#2b3142]">
                <th className="py-3 px-4 font-semibold">Metric</th>
                <th className="py-3 px-4 font-semibold">Value</th>
                <th className="py-3 px-4 font-semibold">Benchmark</th>
              </tr>
            </thead>
            <tbody>
              {metrics.map((item, i) => (
                <tr key={i} className="border-b border-[#1f2533] last:border-0 hover:bg-[#161b26]/40 transition-colors">
                  <td className="py-3 px-4 text-white font-medium">{item.metric}</td>
                  <td className="py-3 px-4">{item.value}</td>
                  <td className="py-3 px-4">{item.benchmark}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* 备注 */}
        <p className="mt-4 text-gray-400 text-sm leading-relaxed">
          Unit economics look workable if hardware is paid upfront and SaaS scales; however, NPI ramp, certifications,
          and working capital for inventory can stretch a $1M raise—financing cadence against TNB milestones is
          critical. I need to see field failure rates, warranty assumptions, and support costs to validate margin
          durability.
        </p>
      </div>

      {/* Founders */}
      <div className="strengths-weaknesses-card p-[16px] flex flex-col justify-between">
        <div>
          <h2 className="text-[#9fb7ff] text-sm font-semibold uppercase tracking-wider mb-4">Founders</h2>

          {/* 表格 */}
          <table className="w-full border-collapse text-left text-sm mb-4">
            <thead>
              <tr className="text-[#8ea2c9] border-b border-[#2b3142]">
                <th className="py-3 px-4 font-semibold">Name</th>
                <th className="py-3 px-4 font-semibold">Title</th>
                <th className="py-3 px-4 font-semibold">Edge</th>
              </tr>
            </thead>
            <tbody>
              {founders.map((item, i) => (
                <tr key={i} className="border-b border-[#1f2533] last:border-0 hover:bg-[#161b26]/40 transition-colors">
                  <td className="py-3 px-4 text-white font-medium">{item.name}</td>
                  <td className="py-3 px-4">{item.title}</td>
                  <td className="py-3 px-4">{item.edge}</td>
                </tr>
              ))}
            </tbody>
          </table>

          {/* 标签 */}
          <div className="flex flex-wrap gap-2 mb-4">
            <span className="px-3 py-1 text-sm rounded-full bg-[#122b18] text-[#00ff84] font-medium">
              Hardware+SaaS
            </span>
            <span className="px-3 py-1 text-sm rounded-full bg-[#192445] text-[#4aa8ff] font-medium">
              First-time CEO
            </span>
            <span className="px-3 py-1 text-sm rounded-full bg-[#2b1e3a] text-[#b388ff] font-medium">
              Ex-Entrepreneur
            </span>
          </div>

          {/* 文字说明 */}
          <p className="text-gray-400 text-sm leading-relaxed">
            Scrappy, technically fluent CEO with a pragmatic builder ethos; CFO provides needed financial discipline.
            Gaps remain in enterprise security leadership (CISO/Head of Security) and global enterprise sales; adding
            these would materially derisk the next phase. Notable advisors/investors (e.g., Michele Romanow; biometric
            expert Marcus Tong) are strong signals and can partially offset team depth at this stage.
          </p>
        </div>
      </div>
    </div>
  )
}
